<template>
  <div
    style="
      width: 100%;
      height: 100%;
      background-color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
    "
  >
  <!-- 添加用户弹窗start -->
    <el-dialog
      :title="content"
      :center="false"
      :visible.sync="dialogTableVisible1"
      :show-close="true"
      width="727px"
      top="300px"
      :before-close="handleClose"
    >
      <div style="display: flex; flex-direction: column; align-items: center">
        <img src="../assets/员工@2x.png" style="width: 642px; height: 196px" />
        <div
          style="
            width: 642px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 38px;
          "
        >
          <div style="display: flex; align-items: center">
            <div style="width: 70px; text-align: left">{{ content2 }}</div>
            <el-input
              style="width: 196px"
              v-model="employeeForm.username"
            ></el-input>
          </div>
          <div style="display: flex; align-items: center">
            <div style="width: 70px; text-align: left">{{ content3 }}</div>
            <el-input
              style="width: 196px"
              v-model="employeeForm.password"
            ></el-input>
          </div>
        </div>
        <div
          style="
            width: 642px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
          "
        >
          <div style="display: flex; align-items: center">
            <div style="width: 70px; text-align: left">{{ content4 }}</div>
            <el-input
              style="width: 196px"
              v-model="employeeForm.name"
            ></el-input>
          </div>
          <div style="display: flex; align-items: center">
            <div style="width: 70px; text-align: left">{{ content5 }}</div>
            <el-select
              style="width: 196px"
              v-model="employeeForm.roleId"
              :placeholder="content6"
            >
              <el-option
                v-for="item in roleArr"
                :key="item.id"
                :label="item.roleNameCn"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div
          style="
            width: 642px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
          "
        >
          <div style="display: flex; align-items: center">
            <div style="width: 70px; text-align: left">{{ content7 }}</div>
            <el-input
              style="width: 196px"
              v-model="employeeForm.email"
            ></el-input>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-content: center; margin-top: 40px">
        <el-button @click="dialogTableVisible1 = false">{{
          content8
        }}</el-button>
        <el-button v-if="!editting" @click="submitAddUser()" type="primary">{{
          content9
        }}</el-button>
        <el-button v-if="editting" @click="confirmSave()" type="primary">{{
          content10
        }}</el-button>
      </div>
    </el-dialog>
    <!-- 添加用户弹窗end -->
  <div style="width: 100%; display: flex; align-items: center">
      <div style="flex: 1">
        <el-tabs v-model="activeName" style="padding: 0 20px">
          <el-tab-pane :label="content11" :name="content11"></el-tab-pane>
        </el-tabs>
      </div>
      <el-button
        type="primary"
        style="margin-right: 49px; border-radius: 20px"
        @click="openAddUserWin"
        >{{ content12 }}</el-button
      >
    </div>
    <div
      style="
        margin-top: 30px;
        width: 95%;
        height: 59px;
        background: #3f8cff;
        border-radius: 8px 8px 0px 0px;
        display: flex;
        align-items: center;
        color: white;
      "
    >
      <div style="flex: 1">{{ content13 }}</div>
      <div style="flex: 1">{{ content4 }}</div>
      <div style="flex: 1">{{ content15 }}</div>
      <div style="flex: 1">{{ content7 }}</div>
      <div style="flex: 1">{{ content5 }}</div>
      <div style="flex: 1">{{ content18 }}</div>
      <div style="flex: 1">{{ content19 }}</div>
    </div>
    <div
      style="
        width: 95%;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
      "
    >
      <div
        v-for="(item, index) in userArr"
        :key="index"
        class="userItemClass"
        :style="{ background: index % 2 == 0 ? '#fff' : '#f9fbff' }"
      >
        <div style="flex: 1">{{ item.id }}</div>
        <div style="flex: 1">{{ item.name }}</div>
        <div style="flex: 1">{{ item.username }}</div>
        <div style="flex: 1">{{ item.email }}</div>
        <div style="flex: 1">{{ item.roleName }}</div>
        <div
          style="
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
          "
        >
          <div
            style="
              width: 40px;
              height: 40px;
              background: green;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 50%;
              color: white;
            "
          >
            {{ item.name != null ? item.name.substring(1, 2) : "" }}
          </div>
        </div>
        <div
          style="
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
          "
        >
          <img
            @click="updateUserInfo(item.id)"
            src="../assets/bg.png"
            style="width: 25px; height: 25px; cursor: pointer"
          />

          <img
            @click="delUserInfo(item.id)"
            src="../assets/bg2.png"
            style="width: 25px; height: 25px; cursor: pointer; margin-left: 5px"
          />
        </div>
      </div>
    </div>
    <el-pagination
      style="
        width: 95%;
        display: flex;
        align-items: center;
        justify-content: end;
        margin-bottom: 27px;
      "
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-sizes="[5, 10, 15, 20]"
      layout="sizes,prev, pager, next,total,jumper"
      :total="totalHit"
    >
    </el-pagination>
  
  </div>
</template>

<script>
import request from "../axios/request";
export default {
  data() {
    return {
      activeName: "用户设置",
      pageNo: 1,
      totalHit: 1,
      pageSize: 10,
      optionOfSearch: null,
      inputOfSearch: null,
      dateRangeForSearch: null,
      userArr: [],
      roleArr: [],
      dialogTableVisible1: false,
      employeeForm: {
        name: null,
        password: "123456",
        username: null,
        departmentId: null,
        roleId: null,
        email: null,
        id: null,
      },
      editting: false,
      winDialog: null,
      content1: "添加用户",
      content2: "用户ID",
      content3: "密码",
      content4: "姓名",
      content5: "用户权限",
      content6: "请选择",
      content7: "电子邮箱",
      content8: "取消",
      content9: "确认添加",
      content10: "确认保存",
      content11: "用户设置",
      content12: "添加员工",
      content13: "员工ID",
      content15: "用户名",
      content18: "员工头像",
      content19: "操作",
    };
  },
  methods: {
    changeLanguage() {
      if (language == "简体中文") {
        this.content1 = "供应商管理";
        this.content2 = "用户设置";
        this.content3 = "录入供应商";
        this.content4 = "供应商编号";
        this.content5 = "供应商名称";
        this.content6 = "供应商简称";
        this.content7 = "联系人";
        this.content8 = "联系电话";
        this.content9 = "地址";
        this.content10 = "备注";
        this.content11 = "操作";
      } else if (language == "English") {
        this.content1 = "Supplier Management";
        this.content2 = "User Settings";
        this.content3 = "Enter Supplier Details";
        this.content4 = "Supplier ID";
        this.content5 = "Supplier Name";
        this.content6 = "Supplier Abbreviation";
        this.content7 = "Contact Person";
        this.content8 = "Contact Phone";
        this.content9 = "Address";
        this.content10 = "Notes";
        this.content11 = "Actions";
      } else {
        this.content1 = "供應商管理";
        this.content2 = "用戶設置";
        this.content3 = "錄入供應商";
        this.content4 = "供應商編號";
        this.content5 = "供應商名稱";
        this.content6 = "供應商簡稱";
        this.content7 = "聯絡人";
        this.content8 = "聯絡電話";
        this.content9 = "地址"; // 注意：在繁体中文中，“地址”通常不改变
        this.content10 = "備註";
        this.content11 = "操作";
      }
    },
    async openAddUserWin() {
      this.dialogTableVisible1 = true;
      this.editting = false;
    },
    handleClose() {
      this.employeeForm = {
        name: null,
        password: "123456",
        username: null,
        departmentId: null,
        roleId: null,
        email: null,
        id: null,
      };
      this.dialogTableVisible1 = false;
    },
    async delUserInfo(id) {
      var resOfDelUserInfo = await request({
        url: "/user/api/delUserInfo/" + id,
        method: "DELETE",
      });
      if (resOfDelUserInfo.data.status == 200) {
        message.success("删除用户成功");
        this.getUserArr();
      }
    },
    async LockUser(id) {
      console.log(id);
      var resOfLockUser = await request({
        url: "/user/api/LockOrUnLockUser/" + id,
        method: "GET",
      });
      if (resOfLockUser.data.status == 200) {
        message.success("修改状态成功");
        this.getUserArr();
      }
      console.log(id);
    },
    async confirmSave() {
      var resOfConfirmSave = await request({
        url: "/user/api/confirmSave",
        method: "POST",
        data: this.employeeForm,
      });
      if (resOfConfirmSave.data.status == 200) {
        this.dialogTableVisible1 = false;
        this.editting = false;
        this.getUserArr();
      }
    },
    async updateUserInfo(id) {
      this.dialogTableVisible1 = true;
      this.editting = true;
      var resOfGetUserInfoById = await request({
        url: "/user/api/getUserInfoById/" + id,
        method: "GET",
      });
      if (resOfGetUserInfoById.data.status == 200) {
        this.employeeForm.name = resOfGetUserInfoById.data.data.name;
        this.employeeForm.password = resOfGetUserInfoById.data.data.password;
        this.employeeForm.username = resOfGetUserInfoById.data.data.username;
        this.employeeForm.roleId = resOfGetUserInfoById.data.data.role;
        this.employeeForm.email = resOfGetUserInfoById.data.data.email;
        this.employeeForm.id = resOfGetUserInfoById.data.data.id;
      }
    },
    async submitAddUser() {
      var resOfSubmitAddUser = await request({
        url: "/user/api/submitAddUser",
        method: "POST",
        data: this.employeeForm,
      });
      if (resOfSubmitAddUser.data.status == 200) {
        this.dialogTableVisible1 = false;
        this.employeeForm = {
          name: null,
          password: "123456",
          username: null,
          departmentId: null,
          roleId: null,
          email: null,
          id: null,
        };
        this.getUserArr();
      }
    },
    handleClick(tab, event) {
      this.pageNo = 1;
      this.totalHit = 1;
      this.pageSize = 10;
      this.getUserArr();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getUserArr();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getUserArr();
    },
    async getUserArr() {
      let resOfGetUserArr = await request({
        url: "/user/api/getUserPage",
        method: "POST",
        data: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          option: this.optionOfSearch,
          inputOfSearch: this.inputOfSearch,
          dateRangeForSearch: this.dateRangeForSearch,
        },
      });
      if (resOfGetUserArr.data.status == 200) {
        this.userArr = resOfGetUserArr.data.data.data;
        this.totalHit = resOfGetUserArr.data.data.totalHit;
      }
    },
  },
  async mounted() {
    // let res = await request({
    //   url: "/user/api/confirmPermission",
    //   method: "GET",
    // });
    // if (res.data.status != 200) {
    //   const loading = this.$loading({
    //     lock: true,
    //     text: "无权访问",
    //     spinner: "el-icon-user-solid",
    //     background: "white",
    //   });
    //   let that = this;
    //   this.winDialog = setTimeout(() => {
    //     loading.close();
    //     that.$router.go(-1);
    //   }, 2000);
    // }
  
    this.getUserArr();
  },
};
</script>

<style scoped>
.el-tabs >>> .el-tabs__item {
  font-size: 22px !important;
  margin: 20px 0;
}

.userItemClass {
  width: 100%;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
</style>